<template>
  <view class="cards">
  	
 
	<scroll-view  style="height: 100%;" scroll-y="true">
		<view class="cardItem animated fadeIn" v-for="(msg,msgIndex) in msgList" @click="goChatBox" v-bind:style="'animation-delay:'+msgIndex*120+'ms'">
			<view class="imgs">
				<image :src="msg.photo" mode=""></image>
			</view>
			<view class="newMsg Han">
				<text class="title mdTitle">{{msg.hr}}</text>
				<text class="place md2Text">{{msg.place}}·{{msg.job}}</text>
				
				<view class ="currentTopMsg md8Text "> <text class="runoff">{{msg.newMsg}}</text> </view>
			</view>
			
			<view class="time">
			     <text class="md2Text">{{msg.time}}</text>
				 <view class="count">
				 	{{msg.count}}
				 </view>
			</view>
		</view>
		
		
	</scroll-view>
 </view>
</template>

<script>
	export default {
		data(){
			return{
				nowTime:'14:32'
			}
		},
		
		props:{
			msgList:{
				type:Array
			}
		},
		
		methods:{
			goChatBox(){
				uni.navigateTo({
					url:'/pages/views/detail/chatBox'
				})
			}
		}
	}
</script>

<style scoped lang="less">
		
	.cards{
		width: 100%;
		height: calc(100% - 130upx);
		margin-top: 10upx;
		
		.cardItem{
			width: 100%;
			padding: 26upx;
			display: flex;
			background-color: #FFFFFF;
			display: flex;
			align-items:center;
			image{
				width: 112upx;
				height: 112upx;
			}
			
			.newMsg{
				
				color: #666666;
				padding-left: 24upx;
				width: 400upx;
				.currentTopMsg{
					padding-top: 25upx;
				}
				
				.title{
					padding-right: 26upx;
				}
				
				.place{
					color: #999999;
				}
			}
			
			.time{
				margin-left: 100upx;
				
				text{
					color: #999999;
				}
				
				.count{
					color: #fff;
					width: 36upx;
					height: 36upx;
					border-radius: 50%;
					background-color: #ff6a6a;
					text-align: center;
					line-height: 36upx;
					margin-top: 15upx;
				}
			}
		}
	}
</style>
